<template>
  <div class="reportData">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="18">
        <!-- <el-tabs class="tabs" v-model="activeName" @tab-click="tabsHandleClick">
              <el-tab-pane class="tab-item" label="上报数据分析" name="seven"> -->
        <div class="tab-item">
          <h4 style="margin: 10px 0 10px">上报数据分析</h4>
          <div>
            <el-date-picker
              v-model="purchaseDate"
              @change="changePurchaseDate"
              :picker-options="pickerOptionsPurchase"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 250px"
            >
            </el-date-picker>
            <el-select
              v-model="typeName"
              @change="chooseType"
              placeholder="请选择品类"
            >
              <el-option
                v-for="item in businessTypeData"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <div style="margin-top: 20px">
            <div id="tb" style="padding: 0 10px">
              <div id="nav" style="background: #fff">
                <ul
                  class="part1"
                  style="margin-top: 20px; padding: 0 0px 0 10px"
                >
                  <!-- <li style="background:#ddd;padding: 20px 0;">序号</li> -->
                  <li style="background: #eee; padding: 20px 0">市场</li>
                  <li style="background: #eee; padding: 20px 0">区域</li>
                </ul>
                <template v-for="item in marketData">
                  <ul
                    class="part1"
                    style="
                      border-bottom: 1px solid #eee;
                      padding: 20px 0;
                      margin-left: 10px;
                    "
                  >
                    <!-- <li>{{ item.id }}</li> -->
                    <li>{{ item.name }}</li>
                    <li>{{ item.area_name }}</li>
                  </ul>
                </template>
              </div>

              <div
                class="content"
                style="background: #fff; padding-right: 10px"
              >
                <div class="list" v-for="item in list">
                  <ul class="part2" style="background: #eee; padding: 20px 0">
                    <div class="top">{{ item.date }}</div>
                    <div class="bottom">
                      <div>进货</div>
                      <div>销售</div>
                    </div>
                  </ul>

                  <template v-for="item2 in item.arr">
                    <ul class="part2" style="border-bottom: 1px solid #eee">
                      <div class="bottom">
                        <div>{{ item2.in }}</div>
                        <div>{{ item2.out }}</div>
                      </div>
                    </ul>
                  </template>
                </div>
              </div>
            </div>
            <el-pagination
              background
              layout="prev, pager, next"
              style="margin: 20px 0 0"
              :total="purchasePage.total"
              :page-size="purchasePage.size"
              :current-page="purchasePage.current"
              @current-change="changePurchasePage"
            ></el-pagination>
          </div>
          <!-- </el-tab-pane>
        </el-tabs> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { formatDate } from "@/utils";
export default {
  name: "reportData",
  data() {
    return {
      marketData: [],
      list: [],
      purchasePage: {
        total: 1,
        size: 10,
        current: 1,
      },
      purchaseTypeId: -1,
      purchaseEndDate: formatDate(new Date()),
      purchaseStartDate: formatDate(
        new Date(new Date().getTime() - 3600 * 1000 * 24 * 6)
      ),
      businessTypeData: [],
      typeName: "全部",
      purchaseDate: [
        formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 6)),
        formatDate(new Date()),
      ],
      pickerMinDate: "",
      pickerOptionsPurchase: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime();
          if (maxDate) {
            this.pickerMinDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate !== "") {
            const day7 = (7 - 1) * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate + day7;
            if (maxTime > new Date()) {
              maxTime = new Date();
            }
            return time.getTime() > maxTime;
          }
          return time.getTime() > Date.now();
        },
      },
    };
  },
  mounted() {
    this.getPurchaseData(
      this.purchaseTypeId,
      this.purchaseStartDate,
      this.purchaseEndDate,
      this.purchasePage.current
    );
    // this.businessTypeData = JSON.parse(sessionStorage.getItem("Typelist"));
    this.businessTypeData = [
      { value: -1, lable: "全部" },
      { value: 0, lable: "蔬菜" },
      { value: 1, lable: "猪肉" },
      { value: 3, lable: "禽类" },
      { value: 9, lable: "牛羊肉" },
      { value: 10, lable: "蛋类" },
      { value: 11, lable: "豆制品" },
    ];
  },
  methods: {
    changePurchaseDate(dateArr) {
      this.purchaseStartDate = formatDate(dateArr[0]);
      this.purchaseEndDate = formatDate(dateArr[1]);
      this.getPurchaseData(
        this.purchaseTypeId,
        formatDate(dateArr[0]),
        formatDate(dateArr[1]),
        this.purchasePage.current
      );
    },
    chooseType(value) {
      this.purchaseTypeId = value;
      this.getPurchaseData(
        value,
        this.purchaseStartDate,
        this.purchaseEndDate,
        this.purchasePage.current
      );
    },
    changePurchasePage(num) {
      // 上报数据分析分页
      this.purchasePage.current = num;
      this.getPurchaseData(
        this.purchaseTypeId,
        this.purchaseStartDate,
        this.purchaseEndDate,
        num
      );
    },
    async getPurchaseData(typeId, startDate, endDate, current = 1) {
      // 获取上报数据分析

      this.$store
        .dispatch("reportData/getPurchaseData", {
          typeId: typeId,
          startDate: startDate,
          endDate: endDate,
          page: current,
        })
        .then((data) => {
          //   console.log(data);
          this.marketData = data.items.marketData;
          //   console.log(this.marketData);

          this.list = data.items.list;
          this.purchasePage.total = data.total;
          this.purchasePage.current = data.currentPage;
        })
        .catch((err) => {
          this.marketData = [];
          this.list = [];
          this.purchasePage.total = 0;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  .header {
    height: 60px;
    line-height: 60px;
    background: #20a0ff;
    color: #fff;
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }
    .logo {
      height: 60px;
      font-size: 22px;
      padding-left: 20px;
      padding-right: 20px;
      border-color: rgba(238, 241, 146, 0.3);
      border-right-width: 1px;
      border-right-style: solid;
      img {
        width: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color: #fff;
      }
    }
    .logo-width {
      width: 230px;
    }
    .logo-collapse-width {
      width: 60px;
    }
    .tools {
      padding: 0px 23px;
      width: 14px;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
    }
  }
}
.row-bg {
  padding: 10px 0;
  // background-color: #f9fafc;
  .tabs {
    // margin-top: 30px;
    // font-size: 18px;
    .tab-item {
      .select-width {
        width: 150px;
        margin-right: 10px;
      }
    }
  }
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
  margin-right: 10px;
}
.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 15px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
#tb {
  display: flex;
  //   justify-content: center;
}
#nav {
  display: flex;
  flex-direction: column;
}
.part1 {
  width: 250px;
  display: flex;
  // padding: 20px 0;
  margin: 0;
}
.part1 li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 30px;
  text-align: center;
}
.part2 {
  width: 113px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 20px 0;
  margin: 0;
}
.part2 .top {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
.part2 .bottom {
  width: 100px;
  display: flex;
}
.part2 .bottom > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.content {
  display: flex;
  padding-top: 20px;
}
*,
*:before,
*:after {
  box-sizing: content-box;
}
::v-deep .el-date-editor .el-range-separator {
  line-height: 40px;
}
.el-range-editor.el-input__inner {
  padding: 0px 10px;
}
</style>